<template>
    <view>
        <view class="rating-section u-flex-col u-col-center u-padding-30">
            <text class="section-title u-font-28 u-color-title">{{title}}</text>
            <view class="star-container u-flex u-margin-top-30">
                <view v-for="index in 5" :key="index" class="star-wrapper" @click="onClick(index+1)">
                    <i class="icon u-font-42" :class="star >= index+1 ? 'star-active' : 'star-inactive'">
                        {{star >= index+1 ? '&#xe60e;' : '&#xe618;'}}
                    </i>
                </view>
            </view>
            <text class="rating-text u-font-26 u-color-subtitle u-margin-top-20">
                {{ratingTexts[star] || placeholder}}
            </text>
        </view>
    </view>
</template>

<script>
    /**
     * 评分
     * @description 此组件一般用于评分。
     * @tutorial https://www.dfer.site
     * @property {String} title 标题
     * @event {Function} @clickHandler 点击按钮会触发此事件
     * @example <dfer-rating @clickHandler="handleStarClick" title="请点击星星进行评分" />
     */
    export default {
        name: "dfer-rating",
        data() {
            return {
                star: 5,
                ratingTexts: {
                    0: '请选择评分',
                    1: '非常不满意',
                    2: '不满意',
                    3: '一般',
                    4: '满意',
                    5: '非常满意'
                }
            };
        },
        props: {
            title: {
                type: String,
                default () {
                    return "评分"
                }
            },
            placeholder: {
                type: String,
                default () {
                    return "请选择评分"
                }
            }
        },
        watch: {},
        created() {},
        methods: {
            onClick(value) {
                this.star = value;
                this.$emit('clickHandler', value);
            }
        }
    }
</script>

<style lang="scss">
    /* 评分区域 */
    .rating-section {
        background: #ffffff;
        margin: 20rpx;
        border-radius: 16rpx;
        box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
        padding: 40rpx 30rpx;
    }

    .section-title {
        font-weight: 500;
        color: #1a1a1a;
    }

    .star-container {
        .star-wrapper {
            padding: 10rpx;
            margin: 0 8rpx;
        }

        .star-active {
            color: #1890ff;
        }

        .star-inactive {
            color: #e8e8e8;
        }
    }

    .rating-text {
        color: #666;
        font-weight: 400;
    }
</style>